<template>
  <AcceptHandleHeadComponent
    ref="acceptHandleHeadRef"
    :ucolumns="ucolumns"
    :needMoreQuery="true"
    :type="LableTitle.respondRecord"
    @myEvent="myEvent"
    @setColumns="setColumns"
    @onSearch="search"
    @onReset="reQuery"
  >
    <!-- 其他查询条件 -->
    <div slot="more">
      <a-form layout="inline" class="accept_more_operate_moreForm">
        <a-collapse v-model="collapseKey" class="accept_more_operate_moreForm_collapse">
          <a-collapse-panel :show-arrow="false" disabled key="1">
            <div slot="header" class="accept_more_operate_moreForm_collapse_head">
              <a-row :gutter="48" style="width: 100%">
                <a-col @click.stop="() => {}" :md="8" :sm="24">
                  <a-form-item label="案号：">
                    <a-input v-model="queryParam.f_firstcode" placeholder="请输入案号" allowClear />
                  </a-form-item>
                </a-col>
                <a-col @click.stop="() => {}" :md="8" :sm="24">
                  <a-form-item label="原告：">
                    <a-input v-model="queryParam.f_plaintiffname" placeholder="请输入原告" allowClear />
                  </a-form-item>
                </a-col>
                <a-col @click.stop="() => {}" :md="8" :sm="24">
                  <a-form-item label="录入人员">
                    <a-input v-model="queryParam.f_regusername" placeholder="请输入录入人员" allowClear />
                  </a-form-item>
                </a-col>
              </a-row>
            </div>
            <a-row :gutter="48" style="width: 100%" class="accept_more_operate_moreForm_collapse_body">
              <a-col @click.stop="() => {}" :md="16" :sm="24">
                <a-form-item label="填报日期">
                  <a-date-picker
                    v-model="queryParam.f_applystarttime"
                    :style="{ width: 'calc(50% - 12px)' }"
                    placeholder="开始日期"
                    format="YYYY-MM-DD"
                    allowClear
                    @change="subtimeListen()"
                  />
                  ~
                  <a-date-picker
                    v-model="queryParam.f_applyendtime"
                    :style="{ width: 'calc(50% - 12px)' }"
                    placeholder="结束日期"
                    format="YYYY-MM-DD"
                    allowClear
                    @change="subtimeListen()"
                  />
                </a-form-item>
              </a-col>
            </a-row>
          </a-collapse-panel>
        </a-collapse>
      </a-form>
    </div>

    <div slot="headLeft" class="slot_div">
      <a-button type="primary" class="btn_primary_color" style="margin-left: 8px" @click="handleForm('add', '3')"
        >登记案件</a-button
      >
    </div>
    <template slot="content">
      <div class="accept_content_table">
        <!-- 表格数据 -->
        <a-table
          :scroll="scroll"
          :columns="ucolumns"
          :data-source="listData"
          :pagination="upagination"
          :loading="loading"
          rowKey="applyid"
          @change="tableChange"
          size="middle"
          :bordered="ubordered"
          :rowClassName="rowClassName"
          :components="header"
          ref="table"
          :key="tableCountKey"
        >
          <span slot="serial" slot-scope="text, record, index">
            {{ (upagination.current - 1) * upagination.pageSize + parseInt(index) + 1 }}
          </span>

          <!-- 起诉事项插槽 -->
          <template slot="suetypeSlot" slot-scope="suetype">
            {{ suetype in Tp_rempr ? Tp_rempr[suetype].name : '' }}
          </template>

          <!-- 行政管理类别 -->
          <template slot="mgrcateSlot" slot-scope="mgrcate_text">
            {{ mgrcate_text ? mgrcate_text : '' }}
          </template>

          <!-- 案件类型 -->
          <template slot="casetypeSlot" slot-scope="casetype">
            {{ casetype in Tp_casetype ? Tp_casetype[casetype].name : '' }}
          </template>

          <!-- 是否经过复议 -->
          <template slot="isreconSlot" slot-scope="isrecon">
            {{ isrecon == 3200 ? '是' : isrecon == 3201 ? '否' : '' }}
          </template>

          <span slot="operation" slot-scope="text, record">
            <template>
              <a href="javascript:;" @click="handleForm(record.applyid, '4')">详情</a>
              <a-divider type="vertical" />
              <a-dropdown>
                <a class="ant-dropdown-link">操作<a-icon type="down" /> </a>
                <a-menu slot="overlay">
                  <!-- 编辑 -->
                  <a-menu-item>
                    <a @click="handleForm(record.applyid, '3')">编辑</a>
                  </a-menu-item>

                  <!-- 删除 -->
                  <a-menu-item>
                    <a-popconfirm
                      title="确定删除吗？"
                      ok-text="确定"
                      cancel-text="取消"
                      @confirm="handleDel(record.applyid)"
                    >
                      <a-icon slot="icon" type="delete" />
                      <a>删除</a>
                    </a-popconfirm>
                  </a-menu-item>
                </a-menu>
              </a-dropdown>
            </template>
          </span>
        </a-table>
      </div>
    </template>
  </AcceptHandleHeadComponent>
</template>
<script>
import { queryApl_respondList, delApl_respond } from '@/api/respond/apl_respond.js'
import storage from 'store'
import { APP_USER } from '@/store/mutation-types.js'
import { Tp_rempr } from '@/enumeration/Tp_rempr.js'
import { Tp_casetype } from '@/enumeration/Tp_casetype.js'
import { listMgrcate } from '@/api/std/std_mgrcate.js'

import drag from '@/components/TableDrag/drag'
import AcceptHandleHeadComponent from '@/views/accept/component/AcceptHandleHeadComponent.vue'
import { LableTitle } from '@/enumeration/LableTitle'
const ucolumns = [
  {
    title: '序号',
    width: 50,
    key: 'index',
    align: 'center',
    fixed: 'left',
    scopedSlots: { customRender: 'serial' }
  },
  {
    title: '案号',
    width: 200,
    dataIndex: 'firstcode',
    key: 'firstcode',
    align: 'center'
  },
  {
    title: '原告',
    width: 200,
    dataIndex: 'plaintiffname',
    key: 'plaintiffname',
    align: 'center'
  },
  {
    title: '起诉事项',
    width: 200,
    dataIndex: 'suetype',
    key: 'suetype',
    align: 'center',
    scopedSlots: { customRender: 'suetypeSlot' }
  },
  {
    title: '行政管理类别',
    width: 200,
    dataIndex: 'mgrcate_text',
    key: 'mgrcate_text',
    align: 'center',
    scopedSlots: { customRender: 'mgrcateSlot' }
  },
  {
    title: '案件类型',
    width: 200,
    dataIndex: 'casetype',
    key: 'casetype',
    align: 'center',
    scopedSlots: { customRender: 'casetypeSlot' }
  },
  {
    title: '是否经过复议',
    width: 200,
    dataIndex: 'isrecon',
    key: 'isrecon',
    align: 'center',
    scopedSlots: { customRender: 'isreconSlot' }
  },
  {
    title: '填报日期',
    width: 200,
    dataIndex: 'createtime',
    key: 'createtime',
    align: 'center'
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
    width: 200,
    fixed: 'right',
    align: 'center',
    scopedSlots: { customRender: 'operation' }
  }
]

export default {
  data () {
    return {
      Tp_casetype: Tp_casetype, // 案件类型枚举
      Tp_rempr: Tp_rempr, // 起诉事项枚举
      mgrcateList: [], // 全部的行政管理单位
      collapseKey: [1], // 折叠面板key
      queryParam: {
        f_firstcode: '', // 案号
        f_regusername: '', // 录入人
        f_plaintiffname: '', // 被申请人
        f_applystarttime: null, // 开始时间
        f_applyendtime: null, // 结束时间
        pageNumber: 1,
        pageSize: 20,
        sort: 'createtime',
        order: 'desc'
      },
      listData: [],
      upagination: {
        // 表格分页参数
        defaultPageSize: 20,
        total: 0,
        current: 1,
        pageSize: 20,
        showTotal: total => `共${total}条数据`,
        showSizeChanger: true,
        pageSizeOptions: ['10', '20', '50', '100']
      },
      loading: false,
      ubordered: true, // 表格边框是否显示
      currentUser: storage.get(APP_USER), // 登录人信息

      ucolumns: ucolumns,
      mixins: [drag],
      header: undefined,
      tableCountKey: 0,
      LableTitle: LableTitle,
      scroll: { x: 1000, y: 410 }
    }
  },
  components: {
    AcceptHandleHeadComponent
  },
  computed: {},
  created () {
    try{
      if(localStorage.getItem('RespondRecordCaselist')){
        this.queryParam = JSON.parse(localStorage.getItem('RespondRecordCaselist'))
        console.log('this.queryParam.RespondRecordCaselist',this.queryParam);
      }
    }catch{
      console.log('路由传参非json格式')
    }
    this.headerChange()
    this.listMgrcate()
    this.queryParam.reguserid = this.currentUser.userId
    this.queryList()
    localStorage.removeItem('RespondRecordCaselist')
  },
  watch: {
    ucolumns: {
      handler (newValue, oldVal) {
        this.headerChange()
      },
      deep: true // 深度监听
    }
  },
  updated () {},
  methods: {
    myEvent (e) {
      if (e) {
        this.scroll.y = this.scroll.y + e
      } else {
        this.scroll.y = 410
      }
    },
    headerChange () {
      console.log('移动后', this.ucolumns)
      this.header = {
        header: {
          cell: drag.methods.initDrag(this.ucolumns)
        }
      }
    },
    setColumns (columns) {
      console.log('重置前', this.ucolumns)
      // tableCountKey自增是为了让表格控件每次销毁强制更新
      this.tableCountKey += 1
      this.ucolumns = columns
      // this.ucolumns = columns
      console.log('重置后', this.ucolumns)
    },

    // 搜索
    search (val) {
      if (val) {
        this.queryParam.f_firstcode = val
      }
      this.queryParam.pageNumber = 1
      this.queryList()
    },
    // 管理类别展示
    mgrcateLabel (record) {
      const mgrcate = record.asmgrcate
      let mgrcateLabel = ''
      if (this.mgrcateList && mgrcate) {
        const mgrcates = mgrcate.split(',')
        const mgrcateLabelArr = []
        for (const mgrcateKey of mgrcates) {
          for (const mgrcateItem of this.mgrcateList) {
            if (mgrcateItem.id == mgrcateKey) {
              mgrcateLabelArr.push(mgrcateItem.name)
            }
          }
        }
        if (mgrcateLabelArr && mgrcateLabelArr.length > 0) {
          mgrcateLabel = mgrcateLabelArr.join('，')
        }
        return mgrcateLabel
      }
      return ''
    },
    /**
     * 查询全部的行政管理单位
     */
    async listMgrcate () {
      await listMgrcate().then(res => {
        if (res.code == 0) {
          this.mgrcateList = res.data
        }
      })
    },
    // 删除未提交案件
    async handleDel (applyid) {
      const { code } = await delApl_respond(applyid)
      if (code == 0) {
        this.$message.success('操作成功')
        this.queryParam.pageNumber = 1
        this.queryList()
      }
    },
    // 重置表头方法
    resetting () {
      this.$refs.headerDefRef.f_resetting()
    },
    // 子组件回调函数, 重置表头
    s_setColumns (columns) {
      this.ucolumns = columns
    },
    // 显示自定义表头组件
    showHeaderDef (e) {
      this.$refs.headerDefRef.f_init(e)
    },
    // 进入申报页面
    handleForm (applyid, pattern) {
      this.$router.push({
        path: `/RespondtRecordAdd/${applyid}/100000_360100-000201004000-QT-002-02/${pattern}`,
        query: {
          url: '/RespondRecordCaselist',
          queryParam: this.queryParam
        }
      })
    },
    // 接收时间监听判断开始结束日期是否合理
    subtimeListen () {
      if (
        this.queryParam.f_applystarttime > this.queryParam.f_applyendtime &&
        this.queryParam.f_applystarttime &&
        this.queryParam.f_applyendtime
      ) {
        this.queryParam.f_applystarttime = undefined
      }
    },
    /**
     * 重置查询条件并查询数据
     */
    reQuery () {
      this.queryParam = {
        f_firstcode: '', // 案号
        f_regusername: '', // 录入人
        f_plaintiffname: '', // 被申请人
        f_applystarttime: null, // 开始时间
        f_applyendtime: null, // 结束时间
        pageNumber: 1,
        pageSize: 20,
        sort: 'createtime',
        order: 'desc',
        f_status: null
      }
      this.queryParam.reguserid = this.currentUser.userId
      this.queryList()
    },

    tableChange (upagination, filters, sorter, { currentDataSource }) {
      this.row_idx = upagination.current * upagination.pageSize - upagination.pageSize
      this.queryParam.pageNumber = upagination.current
      this.queryParam.pageSize = upagination.pageSize
      this.queryList()
    },

    getCpQueryParam () {
      // 时间转换
      const cpQueryParam = JSON.parse(JSON.stringify(this.queryParam))
      if (this.queryParam.f_applystarttime?.format) {
        cpQueryParam.f_applystarttime = this.queryParam.f_applystarttime.format('YYYY-MM-DD') + ' 00:00:00'
      }
      if (this.queryParam.f_applyendtime?.format) {
        cpQueryParam.f_applyendtime = this.queryParam.f_applyendtime.format('YYYY-MM-DD') + ' 23:59:59'
      }
      return cpQueryParam
    },

    queryList () {
      const queryParam = this.getCpQueryParam()
      if (queryParam.f_firstcode) {
        queryParam.f_firstcode = queryParam.f_firstcode.toString().trim()
      }
      if (queryParam.f_plaintiffname) {
        queryParam.f_plaintiffname = queryParam.f_plaintiffname.toString().trim()
      }
      if (queryParam.f_regusername) {
        queryParam.f_regusername = queryParam.f_regusername.toString().trim()
      }
      this.loading = true
      queryApl_respondList(queryParam)
        .then(res => {
          if (res.code !== 0) {
            this.$message.error('获取数据失败')
          } else {
            this.listData = res.data.records || []
            this.listData.forEach(v => {
              // 管理类型
              v.mgrcate_text = this.mgrcateLabel(v)
            })
            // console.log('列表数据', this.listData)
            this.upagination.total = res.data.total
            this.upagination.current = res.data.current
            this.upagination.pageSize = res.data.size
          }
        })
        .catch(err => {
          this.listData = []
          console.log(err, '获取数据失败')
        })
        .finally(() => {
          this.loading = false
        })
    },

    // 修改对应的状态
    statusLable (val) {
      for (const key in this.St_admreview) {
        if (this.St_admreview[key].value == val) {
          return this.St_admreview[key].name
        }
      }
      return val
    },
    rowClassName (record, index) {
      return index % 2 === 0 ? 'oddRow' : 'evenRow'
    }
  }
}
</script>

<style lang="less" scoped>
@import '~@/components/TableDrag/style.less';

.slot_div {
  display: flex;
  align-items: center;
  margin-left: 40px;
}

.label-div {
  padding: 10px;
  height: 100%;
  display: inline-block;
  width: 100%;
}

.label-title {
  float: left;
  font-size: 16px;
  font-weight: bold;
}
.add-btn {
  float: right;
  margin-right: 20px;
}
.input-single {
  width: 200px;
}

.headerdefBox img {
  height: 20px;
  width: 20px;
}
.headerdefBox {
  // border: 1px solid red;
  margin: 0 10px 10px 0;
  display: flex;
  justify-content: end;
}
.formArea {
  margin-bottom: 30px;
}

.collapseArea {
  border: none;
  .ant-collapse-item {
    border-bottom: none;
  }
  /deep/.ant-collapse-content {
    border-top: none;
  }
}
/deep/ .ant-collapse-header {
  background-color: #fff;
}
.collapseArea_header {
  .ant-form-item {
    margin-bottom: 0;
  }
}

.collapseArea_body {
  padding-top: 10px;
  padding: 0 20px 0 0px;
}

.overBox {
  width: 90%;
  overflow: hidden; /*超出部分隐藏*/
  white-space: nowrap; /*不换行*/
  text-overflow: ellipsis; /*超出部分文字以...显示*/
}
</style>
